<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="description" content="545在线，电子雷峰塔，随时补充塔能量！笙歌牌播放器，采用PWA技术，支持智能缓存本地播放，可完全断网使用，由琴梨梨驱动" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <link rel="canonical" href="https://545.qinlili.bid/wallpaper" />
    <link rel="manifest" href="/manifest.json">
    <meta name="referrer" content="no-referrer" />
    <meta name="theme-color" content="#FADCBB">
    <link rel="icon" href="/icon_mono.png">
    <link rel="apple-touch-icon" href="/icon_badminton_mask_small.png.png">
    <meta name="apple-mobile-web-app-title" content="545在线">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
    <title>545在线-壁纸模式</title>
    <style>
        @keyframes smallp {
            0% {
                opacity: 0;
            }

            20% {
                opacity: 0;
            }

            25% {
                opacity: 1;
            }

            45% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            75% {
                opacity: 0;
            }

            100% {
                opacity: 0;
            }
        }

        @keyframes smallm {
            0% {
                opacity: 1;
            }

            20% {
                opacity: 1;
            }

            25% {
                opacity: 0;
            }

            45% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            70% {
                opacity: 1;
            }

            75% {
                opacity: 0;
            }

            95% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes smalla {
            0% {
                opacity: 0;
            }

            25% {
                opacity: 0;
            }

            50% {
                opacity: 0;
            }

            70% {
                opacity: 0;
            }

            75% {
                opacity: 1;
            }

            95% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        body {
            user-select: none;
            margin: 0px;
            overflow: hidden;
            width: 100vw;
            height: 100vh;
            background-image: url(./wallpaper.webp);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;
        }

        #playerFrame {
            z-index: 5;
            border-radius: 5px;
            box-shadow: 0 0 20px rgb(0 0 0 / 25%);
            background-color: rgba(255, 255, 255, 0.75);
            backdrop-filter: blur(3px) brightness(100%);
            -webkit-backdrop-filter: blur(3px) brightness(100%);
            position: absolute;
            right: 32px;
            top: 10vh;
            height: 80vh;
            min-width: 320px;
            transition: right 1s ease-out, top 1s ease-out, width 2s ease-in-out, max-width 2s ease-in-out;
        }

        .musicFrame {
            width: 30vw;
        }

        .liveFrame {
            width: 80vw;
        }

        #displayBtn {
            z-index: 1;
            opacity: 0;
            position: absolute;
            right: 0px;
            width: 32px;
            top: 10vh;
            height: 80vh;
            transition: opacity 0.25s ease-in-out;
        }

        #displayBtn:hover {
            opacity: 1;
        }

        #displayBtnIcon {
            filter: drop-shadow(3px 3px 2px rgba(255, 255, 255, .7));
            width: 32px;
            height: 80vh;
            transition: transform 0.5s ease-in-out;
            transform: rotate(270deg);
        }

        #liveStatus {
            cursor: pointer;
            border-radius: 0px 0px 0px 10px;
            display: flex;
            filter: drop-shadow(3px 3px 2px rgba(255, 255, 255, .7));
            flex-direction: row;
            position: absolute;
            top: 0px;
            height: 40px;
            width: 200px;
            right: -160px;
            transition: right 0.5s ease-in-out, box-shadow 0.5s, backdrop-filter 0.5s, -webkit-backdrop-filter 0.5s, background-color 0.5s;
        }

        #liveStatus:hover {
            box-shadow: 0 0 20px rgb(0 0 0 / 25%);
            backdrop-filter: blur(3px) brightness(100%);
            -webkit-backdrop-filter: blur(3px) brightness(100%);
            background-color: rgba(255, 255, 255, .5);
            right: 0px !important;
        }

        #liveIcon {
            height: 32px;
            width: 32px;
            margin: 4px;
            transition: filter 0.5s;
            filter: invert(51%) sepia(1%) saturate(915%) hue-rotate(322deg) brightness(90%) contrast(86%);
        }

        #liveText {
            height: 24px;
            margin: 8px;
            width: 144px;
            line-height: 24px;
            font-size: 24px;
        }

        #anim {
            width: 128px;
            height: 128px;
            position: absolute;
            right: 200px;
            top: -128px;
            transition: top 0.5s ease-out;
        }

        .smallAnim {
            width: 128px;
            height: 128px;
            position: absolute;
            transition: opacity 0.1s ease-in-out;
        }

        #splash {
            object-fit: cover;
            background-color: white;
            position: absolute;
            z-index: 100;
            width: 100%;
            height: 100%;
            opacity: 1;
            transition: opacity 0.5s ease-in-out;
        }
    </style>
</head>

<body>
    <iframe src="/" id="playerFrame" class="musicFrame" frameborder="0" framespacing="0" scrolling="no"
        allow="autoplay; encrypted-media" allowfullscreen="true"></iframe>
    <div id="displayBtn">
        <img id="displayBtnIcon" src="/img/expand.svg" alt="切换音频面板">
    </div>
    <div id="liveStatus">
        <img id="liveIcon" src="/img/broadcast.svg" alt="直播间">
        <span id="liveText">连接中请稍等</span>
    </div>
    <div id="anim">
        <img class="smallAnim" id="smallp" style="animation: smallp 3s;animation-iteration-count: infinite;"
            src="./smallp.webp">
        <img class="smallAnim" id="smallm" style="animation: smallm 3s;animation-iteration-count: infinite;"
            src="./smallm.webp">
        <img class="smallAnim" id="smalla" style="animation: smalla 3s;animation-iteration-count: infinite;"
            src="./smalla.webp">
    </div>
    <video id="splash" playsinline muted autoplay oncontextmenu="return false;"></video>
    <script>
        if (localStorage.disableAnim ? JSON.parse(localStorage.disableAnim) : false) {
            var style = document.createElement('style');
            style.type = 'text/css';
            style.rel = 'stylesheet';
            style.appendChild(document.createTextNode(`*{transition:none !important;}`));
            document.getElementsByTagName('head')[0].appendChild(style);
        };
        window.directLive = localStorage.directLive ? JSON.parse(localStorage.directLive) : false;
        window.autoLive = false;
        window.addEventListener("message", async (event) => {
            console.log(event.data)
            if (event.data == "exit") {
                location.replace("/")
            }
        }, false);
        const sleep = delay => new Promise((resolve) => setTimeout(resolve, delay));
        (async () => {
            const hide = async () => {
                if (!hided) {
                    document.getElementById("splash").style.opacity = 0;
                    await sleep(500);
                    document.getElementById("splash").remove();
                    hided = true;
                }
            }
            let loaded = false;
            let hided = false;
            setTimeout(() => {
                if (!loaded) {
                    hide();
                }
            }, 1000)
            let video = URL.createObjectURL(await (await fetch("./op.webm").catch(() => { hide(); })).blob().catch(() => { hide(); }))
            loaded = true;
            document.getElementById("splash").src = video;
            document.getElementById("splash").addEventListener("ended", () => {
                hide();
            })
        })();
        (() => {
            let displayPanel = true;
            let isLive = false;
            document.getElementById("displayBtn").addEventListener("click", () => {
                switch (displayPanel) {
                    case false:
                        {
                            displayPanel = true;
                            document.getElementById("playerFrame").style.right = "32px";
                            document.getElementById("anim").style.top = "-128px";
                            document.getElementById("displayBtnIcon").style.transform = "rotate(270deg)";
                            break;
                        };
                    case true:
                    default:
                        {
                            displayPanel = false;
                            document.getElementById("playerFrame").style.right = "calc(-100vw - 320px)";
                            document.getElementById("anim").style.top = "0px";
                            document.getElementById("displayBtnIcon").style.transform = "rotate(90deg)";
                            break;
                        };
                }
            });
            document.getElementById("liveStatus").addEventListener("click", async () => {
                //切换直播页面
                switch (isLive) {
                    case true:
                        {
                            isLive = false;
                            document.getElementById("playerFrame").className = "musicFrame";
                            document.getElementById("playerFrame").src = "about:blank";
                            await sleep(1000);
                            document.getElementById("playerFrame").src = "/";
                            break;
                        };
                    case false:
                    default:
                        {
                            isLive = true;
                            document.getElementById("playerFrame").className = "liveFrame";
                            document.getElementById("playerFrame").src = "https://www.bilibili.com/blackboard/live/live-activity-player.html?cid=573893&quality=10000";
                            break;
                        };
                }
                document.getElementById("liveText").innerText = "连接中请稍等";
                detectLive();
            });
            const detectLive = async () => {
                let time = new Date().getHours() + (new Date().getTimezoneOffset() / 60 + 8);
                if (time < 0) {
                    time += 24;
                }
                let liveStatus = await (await fetch((navigator.userAgent === "545LocalPlayer") ? "http://127.0.0.1:60510/https://api.live.bilibili.com/bili/living_v2/15641218" : "https://biliapi.qinlili.bid/status?uid=15641218&ForceNoCache=1").catch(async error => {
                    await sleep(60000);
                    detectLive();
                })).json().catch(async error => {
                    await sleep(60000);
                    detectLive();
                });
                if (liveStatus.data) {
                    switch (liveStatus.data.status) {
                        case 1:
                            {
                                document.getElementById("liveStatus").style.right = "0px";
                                document.getElementById("liveStatus").style.backgroundColor = "rgba(255, 255, 255, .5)";
                                if (isLive) {
                                    document.getElementById("liveText").innerText = "返回音乐播放";
                                } else {
                                    if (directLive && !autoLive) {
                                        document.getElementById("liveText").innerText = "自动打开直播";
                                        isLive = true;
                                        autoLive = true;
                                        document.getElementById("playerFrame").className = "liveFrame";
                                        document.getElementById("playerFrame").src = "https://www.bilibili.com/blackboard/live/live-activity-player.html?cid=573893&quality=10000";
                                    } else {
                                        document.getElementById("liveText").innerText = "塔宝正在直播";
                                    }
                                }
                                document.getElementById("liveText").style.color = "rgba(0,200,0,1)";
                                document.getElementById("liveIcon").style.filter = "invert(54%) sepia(37%) saturate(6074%) hue-rotate(89deg) brightness(112%) contrast(119%)";
                                break;
                            };
                        case 2:
                        case 0:
                        default:
                            {
                                document.getElementById("liveStatus").style.right = "-160px";
                                document.getElementById("liveStatus").style.backgroundColor = "";
                                document.getElementById("liveText").innerText = "塔宝还没直播";
                                document.getElementById("liveText").style.color = "black";
                                document.getElementById("liveIcon").style.filter = "none";
                                autoLivbe = false;
                                break;
                            }
                    };
                    await sleep(300000);
                    detectLive();
                } else {
                    await sleep(60000);
                    detectLive();
                }
            };
            detectLive();
        })()
    </script>
</body>

</html>